<template>
    <div class="input-big">
        <div class="content">
            <div class="input-div">
                <div class="text">
                    <span>手机号</span>
                    <span class="maohao">:</span>
                </div>
                <input v-model="phone" @blur="phone_blur" @mousedown="phone_focus" type="text">
                <div class="phone_hr line hr1"></div>
                <div class="line"></div>
            </div>
            <div class="input-div">
                <div class="text">
                    <span>密&emsp;码</span>
                    <span class="maohao">:</span>
                </div>
                <input v-model="password" @blur="password_blur" @mousedown="password_focus" type="text">
                <div class="phone_hr line hr2"></div>
                <div class="line"></div>
            </div>
            <div class="yuan_content">
                <div class="yuan"></div>
            </div>
            <div class="btndiv">
                <input @click="rout" disabled type="button" class="btn" value="登陆" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref, watch } from 'vue';
let phone = ref('')
let password = ref('')
let hr_flag = ref('')
function rout() {
    router.push({
        path: '/two',
    })
}
function phone_focus() {
    if (hr_flag.value == '') {
        document.querySelector('.hr1').style = 'left:0;'
        document.querySelector('.hr2').style = 'left:100%; transition: 0s;'
        hr_flag.value = 'phone'
    }
    if (hr_flag.value == 'password') {
        document.querySelector('.hr2').style = 'left:100%;'
        document.querySelector('.hr1').style = 'left:0;'
        document.querySelector('.yuan').classList.remove('shang')
        document.querySelector('.yuan').classList.add('xia')
        hr_flag.value = 'phone'
    }
}
function password_focus() {
    if (hr_flag.value == '') {
        document.querySelector('.hr2').style = 'left:0;'
        document.querySelector('.hr1').style = 'left:100%; transition: 0s;'
        hr_flag.value = 'password'
    }
    if (hr_flag.value == 'phone') {
        document.querySelector('.hr1').style = 'left:100%;'
        document.querySelector('.hr2').style = 'left:0;'
        document.querySelector('.yuan').classList.remove('xia')
        document.querySelector('.yuan').classList.add('shang')
        hr_flag.value = 'password'
    }
}
watch([phone, password], ([newphone, newpassword], [oldphone, oldpassword]) => {
    if (newphone == '123' && newpassword == '456') {
        document.querySelector('.btn').style = 'opacity: 1;'
        document.querySelector('.btn').disabled = false
    } else {
        document.querySelector('.btn').style = 'opacity: 0;'
        document.querySelector('.btn').disabled = true
    }
})
</script>
<style scoped>
.btndiv {
    text-align: center;
    margin-top: 20px;

    .btn {
        width: 60px;
        text-align: center;
        color: #fff;
        height: 40px;
        background-color: rgb(249, 176, 67);
        border: none;
        outline: none;
        border-radius: 10px;
        cursor: pointer;
        opacity: 0;
        transition: all 0.5s;
    }
}

@keyframes xia {
    from {
        transform: rotateZ(495deg);
    }

    to {
        transform: rotateZ(135deg);
    }
}

@keyframes shang {
    from {
        transform: rotateZ(135deg);
    }

    to {
        transform: rotateZ(495deg);
    }
}

.xia {
    animation: xia 0.5s;
}

.shang {
    animation: shang 0.5s;
}

.content {
    width: 100%;
    height: 100%;
    position: relative;

    .yuan_content {
        position: absolute;
        width: 25px;
        height: 51px;
        top: 49px;
        right: -25px;
        overflow: hidden;

        .yuan {
            border-radius: 50%;
            width: 49px;
            height: 49px;
            right: 0;
            top: 0;
            border-radius: 50%;
            border: 1px solid red;
            border-left-color: transparent;
            border-top-color: transparent;
            position: absolute;
            transform: rotateZ(495deg);
        }
    }
}

.input-big {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 60px 40px 0;
    box-sizing: border-box;
}

.input-div {
    position: relative;
    height: 50px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    overflow: hidden;

    .line {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #999;
        z-index: 1;
    }

    .phone_hr {
        background-color: red;
        z-index: 2;
        /* left: 0; */
        /* transform: translateX(-100%); */
        /* transition: transform 2s; */
        left: -100%;
        transition: 0.5s;
    }

    .text {
        width: 62px;
        position: relative;
        display: block;
        height: 100%;
        display: flex;
        align-items: center;

        .maohao {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
        }
    }

    input {
        border: none;
        outline: none;
        flex: 1;
        height: 100%;
        font-size: 14px;
        color: #333;
    }
}
</style>